<template>
  <div class="emr-content-module module-familyHistory">
    <h3 id="familyHistory">
      过敏性疾病家族史
      <el-popover
        placement="right"
        title="过敏性疾病家族史"
        :width="300"
        trigger="hover"
      >
        <div>
          1.
          家里有没有其他人患有哮喘、过敏性鼻炎、皮肤过敏、食物过敏的？包括爸爸、妈妈、兄弟姐妹，还有爷爷、奶奶、外公、外婆等有血缘关系的家族成员。
        </div>
        <div>
          2.
          家里哪一位有过敏？具体是哪一种过敏？（有过敏史的具体家庭成员）有没有做过过敏原检查证实哪种过敏原过敏？
        </div>
        <div>
          3. 孩子会不会在夜睡过程中因为咳嗽、气喘、或“喘不过气来”而醒来？
        </div>
        <template #reference>
          <svg-icon icon-class="question" />
        </template>
      </el-popover>
    </h3>
    <div class="content-wrapper" :class="{ locked: d.disabled }">
      <div>
        家族史:
        <el-radio-group
          v-model="d.familyHistory.hasFamilyHistory"
          @change="clear('familyHistory')"
          :disabled="d.disabled"
        >
          <el-radio size="medium" label="0">无</el-radio>
          <el-radio size="medium" label="1">有</el-radio>
        </el-radio-group>
      </div>
      <template v-if="d.familyHistory.hasFamilyHistory === '1'">
        哮喘：
        <div>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            v-model="d.familyHistory.asthma.father"
          >
            父
          </el-checkbox>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            v-model="d.familyHistory.asthma.mother"
          >
            母
          </el-checkbox>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            @change="clear('asthma')"
            v-model="d.familyHistory.asthma.siblings"
          >
            同胞
          </el-checkbox>
          <span class="inline-block">
            <el-checkbox-group
              v-if="d.familyHistory.asthma.siblings"
              v-model="d.familyHistory.asthma.siblingsChecks"
            >
              (
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="elderBrother"
              >
                哥哥
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="elderSister"
              >
                姐姐
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="youngerBrother"
              >
                弟弟
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="youngerSister"
              >
                妹妹
              </el-checkbox>
              )
            </el-checkbox-group>
          </span>
          父系和母系家族其它成员
          <el-input
            size="medium"
            :disabled="d.disabled"
            placeholder=""
            v-model="d.familyHistory.asthma.other"
            style="width: 160px"
          ></el-input>
        </div>
        过敏性鼻炎：
        <div>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            v-model="d.familyHistory.rhinallergosis.father"
          >
            父
          </el-checkbox>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            v-model="d.familyHistory.rhinallergosis.mother"
          >
            母
          </el-checkbox>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            @change="clear('rhinallergosis')"
            v-model="d.familyHistory.rhinallergosis.siblings"
          >
            同胞
          </el-checkbox>
          <span class="inline-block">
            <el-checkbox-group
              v-if="d.familyHistory.rhinallergosis.siblings"
              v-model="d.familyHistory.rhinallergosis.siblingsChecks"
            >
              (
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="elderBrother"
              >
                哥哥
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="elderSister"
              >
                姐姐
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="youngerBrother"
              >
                弟弟
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="youngerSister"
              >
                妹妹
              </el-checkbox>
              )
            </el-checkbox-group>
          </span>
          父系和母系家族其它成员
          <el-input
            size="medium"
            :disabled="d.disabled"
            placeholder=""
            v-model="d.familyHistory.rhinallergosis.other"
            style="width: 160px"
          ></el-input>
        </div>

        食物过敏史：
        <div>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            v-model="d.familyHistory.allergyHistory.father"
          >
            父
          </el-checkbox>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            v-model="d.familyHistory.allergyHistory.mother"
          >
            母
          </el-checkbox>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            @change="clear('allergyHistory')"
            v-model="d.familyHistory.allergyHistory.siblings"
          >
            同胞
          </el-checkbox>
          <span class="inline-block">
            <el-checkbox-group
              v-if="d.familyHistory.allergyHistory.siblings"
              v-model="d.familyHistory.allergyHistory.siblingsChecks"
            >
              (
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="elderBrother"
              >
                哥哥
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="elderSister"
              >
                姐姐
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="youngerBrother"
              >
                弟弟
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="youngerSister"
              >
                妹妹
              </el-checkbox>
              )
            </el-checkbox-group>
          </span>
          父系和母系家族其它成员
          <el-input
            size="medium"
            :disabled="d.disabled"
            placeholder=""
            v-model="d.familyHistory.allergyHistory.other"
            style="width: 160px"
          ></el-input>
          食物名称：
          <el-input
            size="medium"
            :disabled="d.disabled"
            placeholder=""
            v-model="d.familyHistory.allergyHistory.foodName"
            style="width: 160px"
          ></el-input>
        </div>
        吸入过敏原致敏史:
        <div>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            v-model="d.familyHistory.suckAllergyHistory.father"
          >
            父
          </el-checkbox>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            v-model="d.familyHistory.suckAllergyHistory.mother"
          >
            母
          </el-checkbox>
          <el-checkbox
            size="medium"
            :disabled="d.disabled"
            @change="clear('suckAllergyHistory')"
            v-model="d.familyHistory.suckAllergyHistory.siblings"
          >
            同胞
          </el-checkbox>
          <span class="inline-block">
            <el-checkbox-group
              v-if="d.familyHistory.suckAllergyHistory.siblings"
              v-model="d.familyHistory.suckAllergyHistory.siblingsChecks"
            >
              (
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="elderBrother"
              >
                哥哥
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="elderSister"
              >
                姐姐
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="youngerBrother"
              >
                弟弟
              </el-checkbox>
              <el-checkbox
                size="medium"
                :disabled="d.disabled"
                label="youngerSister"
              >
                妹妹
              </el-checkbox>
              )
            </el-checkbox-group>
          </span>
          父系和母系家族其它成员
          <el-input
            size="medium"
            :disabled="d.disabled"
            placeholder=""
            v-model="d.familyHistory.suckAllergyHistory.other"
            style="width: 160px"
          ></el-input>
          过敏原:
          <el-input
            size="medium"
            :disabled="d.disabled"
            placeholder=""
            v-model="d.familyHistory.suckAllergyHistory.suckAllergyName"
            style="width: 160px"
          ></el-input>
        </div>
        <el-input
          size="medium"
          type="textarea"
          :disabled="d.disabled"
          placeholder="补充内容,限制100个字符以内 "
          :maxlength="100"
          :autosize="{ minRows: 1, maxRows: 4 }"
          v-model="d.familyHistory.others"
          style="margin-top: 0.5rem"
        ></el-input>
      </template>
    </div>

    <h3>家庭成员是否吸烟</h3>
    <div class="content-wrapper">
      <!-- 家庭成员是否有吸烟 -->
      <div>
        家庭成员是否有吸烟:
        <el-radio-group v-model="d.familyHistory.familySmoking">
          <el-radio size="medium" :disabled="d.disabled" label="0">无</el-radio>
          <el-radio size="medium" :disabled="d.disabled" label="1">有</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>
<script>
  import { reactive } from '@vue/reactivity'
  import { initFamilyHistory } from './initTools'
  export default {
    setup() {
      const clear = function (val) {
        const model = initFamilyHistory()
        switch (val) {
          case 'familyHistory':
            model.hasFamilyHistory = d.familyHistory.hasFamilyHistory
            d.familyHistory = model
            break
          default:
            d.familyHistory[val].siblingsChecks = []
            break
        }
      }
      const d = reactive({
        familyHistory: initFamilyHistory(),
        disabled: false,
      })
      const getData = function () {
        return d.familyHistory
      }
      return {
        d,
        clear,
        getData,
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/emr.scss';
</style>
